<template>
  <!-- 滑块弹窗 -->
  <f7-popup
    class="rollback-popup-swipe"
    @popup:closed="fClose"
    :opened="opendStatus"
  >
    <f7-page>
        <f7-navbar>
            <f7-nav-left>
                <f7-link popup-close> <i class="nav-icon__back f7-icons">chevron_left</i> </f7-link>
            </f7-nav-left>
            <f7-nav-title>回退</f7-nav-title>
        </f7-navbar>

        <qm-form  ref="form">

            <qm-field
                label="选择需要跳转的环节"
                placeholder="选择"
                :value="jump"
                :rules="[{ required: true, message: '请选择需要跳转的环节' }]"
                is-link
                @click="openAction()" required readonly disabled
            ></qm-field>

            <qm-field
                label="意见"
                type="textarea"
                rows="5"
                placeholder="选择常用意见"
                :value="workflowComment"
                @input="workflowComment = $event"
            ></qm-field>

            <qm-button title="回退" type="primary" fill @click="fuSubmit"></qm-button>
        </qm-form>

        <f7-actions ref="backAction" class="action">
            <!-- 回退环节 -->
            <f7-actions-group>
                    <f7-list class="exc-list">
                        <li @click="select(item)" v-for="(item, index) in jumps" :key="item.handlerId + index">
                            <a class="item-link item-content">
                                <div class="item-inner">
                                    <div class="jump-container">
                                        <div class="jump-order">{{jumps.length - index}}、</div>
                                        <div class="jump-title">{{`${item.taskName}(处理人：${item.handlerName};处理意见：${item.opinionText});`}}</div>
                                    </div>
                                    
                                </div>
                            </a>
                        </li>
                    </f7-list>
                </f7-actions-group>
        </f7-actions>
    </f7-page>
  </f7-popup>
</template>

<script>
export default {
    name: "QmWorkflowRollback",
    props: {
        selectJump: String,
        rollback: String,
        params: {
            type: Object,
            default: ()=> {
                return {};
            }
        }
    },
    data() {
        return {
            opendStatus: false,
            jumps: [],
            jump: "",
            workflowComment: "",
            targetActivityId: "",
        }
    },
    created() {
        this.$nextTick(()=> {
            if(this.selectJump) {
                this.$util.request(
                    this.selectJump,
                    this.params,
                    "post"
                ).then(res=> {
                    this.jumps = res.data;
                })
            }
        })
    },
    methods: {
        fClose() {
            this.opendStatus = false;
        },
        openAction() {
            this.$refs.backAction.open();
        },
        closeAction() {
            this.$refs.backAction.close();
        },
        select(jump) {
            this.jump = `${jump.taskName} (处理人：${jump.handlerName};处理意见：${jump.opinionText});`;
            this.targetActivityId = jump.taskCode;
            this.closeAction();
        },
        fuSubmit() {
            this.$f7.dialog.confirm("确定要回退吗", confirm=> {
                if (this.rollback) {
                    this.$f7.preloader.show();
                    this.$util.request(
                        this.rollback,
                        {
                            targetActivityId: this.targetActivityId,
                            workflowComment: this.workflowComment,
                        },
                        "post"
                    ).then(res=> {
                        this.$f7.preloader.hide();
                        if (res.data.success) {
                            this.$f7.popup.close(".rollback-popup-swipe");
                            this.$f7.dialog.alert("回退成功", ()=>{
                                this.$f7.views.current.router.back();
                            })
                        } else {
                            this.$f7.dialog.alert("回退失败");
                        }
                    }).catch(err=> {
                        this.$f7.preloader.hide();
                        this.$f7.dialog.alert("回退失败");
                        throw err;
                    })
                }
            });
        }
    },

}
</script>

<style lang="less" scoped>
.exc-list {
    max-height: 60vh;
    overflow-y: scroll;
    margin: 0;
    background-color: #fff;
}
.button {
    margin: 16px;
}
.jump-container {
    display: flex;
}
</style>